<template>
  <div id="collectPraise">
    <div class="collectPraise__top">
      <!-- 上部搜索条件 -->
      <topSearch
        v-if="activeList"
        :form-inline="formInline"
        @toSearch="toSearch"
        :activeList="activeList"
      ></topSearch>
      <!-- 操作按钮部分 -->
      <div class="box-btn">
        <div class="box-btn__left">
          <el-button
            type="success"
            class="box-btn__left__all"
            size="medium"
            icon="el-icon-plus"
            @click="addChannelUrl"
            >新增</el-button
          >
        </div>
        <div class="box-btn__right">
          <freshCom
            class="refresh-btn"
            @searchList="searchChannelsList"
          ></freshCom>
        </div>
      </div>
    </div>
    <!-- 表格部分 -->
    <el-table
      id="vest-box"
      v-loading="loading"
      :data="tableData"
      style="width: 100%"
      ref="table"
    >
      <el-table-column
        type="index"
        width="60"
        label="序号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="activityName"
        width="150"
        label="活动名称"
      ></el-table-column>
      <el-table-column
        prop="activityOriginalUrl"
        width="230"
        label="活动原始链接"
      ></el-table-column>
      <el-table-column label="推广渠道名称" align="center" prop="channelName" />
      <el-table-column
        label="推广渠道名称编号"
        width="200"
        align="center"
        prop="channelNum"
      />
      <el-table-column
        label="活动推广长链接"
        width="320"
        align="center"
        prop="longChain"
      />
      <el-table-column
        label="活动推广短链接"
        align="center"
        prop="shortChain"
        width="220"
      >
      </el-table-column>
      <el-table-column label="二维码" prop="shortChain" width="120">
        <template slot-scope="scope"
          ><urlQrCode :link="scope.row.shortChain"></urlQrCode></template
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="170">
        <template slot-scope="scope">
          <el-button
            @click="copyShortChain(scope.row.shortChain)"
            v-copy="scope.row.shortChain"
            type="text"
            >复制链接</el-button
          >
          <!-- <el-button @click="saveImages" type="text">保存二维码</el-button> -->
          <span class="delBtn" @click="delChannels(scope.row.id)" type="text"
            >删除</span
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增弹窗 -->
    <channelUrlDialog
      :activeList="activeList"
      v-if="examineDialogData.isShow"
      :dialog-data="examineDialogData"
      @refresh="searchChannelsList"
    >
    </channelUrlDialog>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchChannelsList"
    ></pageCom>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import topSearch from './topSearch' // 上部搜索条件
import channelUrlDialog from './channelUrlDialog'
import urlQrCode from './urlQrCode'
import {
  getChannelsList,
  delChannels,
  getActivitiesNameList
} from '@/api/activityCenter/channels'
import { copy } from 'v-copy'
export default {
  directives: {
    copy
  },
  name: 'channels',
  components: {
    topSearch,
    channelUrlDialog,
    urlQrCode
  },
  data() {
    return {
      // 搜索条件
      formInline: {
        activityId: '', //活动id
        channelName: '', // 推广渠道名称
        channelNum: '' // 推广渠道名称编号
      },
      // 表格数据
      tableData: [],
      // 活动名称列表
      activeList: [],
      //数据列表加载控制
      loading: true,
      //数据列表分页条数
      total: 0,
      //数据列表分页数据
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      //查看入量弹窗的参数
      examineDialogData: {
        isShow: false // 默认隐藏
      },
      activityId: '' //全局保存活动id
    }
  },
  created() {
    this.loading = false
  },
  mounted() {
    this.toSearch()
  },
  methods: {
    // 列表活动名称下拉
    getActivitiesNameList() {
      getActivitiesNameList(
        (response) => {
          this.activeList = response
          this.searchChannelsList()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 获取渠道列表
    searchChannelsList() {
      this.loading = true
      let params = Object.assign({}, this.searchParams, this.formInline)
      getChannelsList(
        params,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
          this.loading = false
        }
      )
    },
    // 新增弹窗
    addChannelUrl() {
      this.examineDialogData.isShow = true // 显示弹框
    },
    // 搜索
    toSearch() {
      this.searchParams.pageNum = 1
      this.getActivitiesNameList()
    },
    // 复制短链
    copyShortChain(val) {
      if (val) {
        this.$message.success('已复制！')
      } else {
        this.$message.warning('无数据！')
      }
    },
    // 保存二维码生成
    saveImages() {
      html2canvas(document.getElementById('imageWrapper')).then((canvas) => {
        let saveUrl = canvas.toDataURL('image/png')
        let aLink = document.createElement('a')
        let blob = this.base64ToBlob(saveUrl)
        let evt = document.createEvent('HTMLEvents')
        evt.initEvent('click', true, true)
        aLink.download = '二维码.jpg'
        aLink.href = URL.createObjectURL(blob)
        aLink.click()
        if (aLink.href) {
          this.$message.success('保存成功')
        }
      })
    },
    base64ToBlob(code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },
    // 删除渠道配置
    delChannels(id) {
      this.$confirm(`是否删除该渠道配置`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delChannels(id, (response) => {
          this.searchChannelsList()
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
#collectPraise {
  @import url('~@common/style/imgBox.less');
  .showImg {
    cursor: pointer;
  }
}
.collectPraise__top {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  .box-btn {
    padding-left: 30px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: row;
    align-content: space-between;
    align-items: center;
    width: 100%;
    .box-btn__left {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      .box-btn__left__all {
        padding: 5px 10px;
      }
      .box-btn__left__export {
        padding: 5px 10px;
        margin-right: 10px;
      }

      .descriptions-box {
        display: flex;
        flex-direction: row;
        font-size: 13px;
        line-height: 23px;
        flex-wrap: wrap;
        width: 100%;
        .descriptions-list {
          display: flex;
          flex-wrap: wrap;
          margin: 0 20px;
          .descriptions-list__span {
            display: block;
            font-size: 15px;
            font-weight: 800;
          }
        }
      }
    }
    .box-btn__right {
      flex-grow: 1;
      .refresh-btn {
        margin-right: 30px !important;
      }
    }
  }
}
.delBtn {
  color: #ff0000;
  cursor: pointer;
  &:hover {
    color: #f92d2d;
  }
}
</style>
